<template>
	<view class="content">
		<!-- 上传图片 -->
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true"
			:maxCount="9" width="112rpx" height="109rpx" :deletable="true" :previewImage="true" >
			<!-- 自定义上传按钮图片 -->
			<image src="/static/images/uploadImg.png" mode="widthFix" style="width: 112rpx;height: 110rpx;"></image>
		</u-upload>
		 <!-- 点击上传按钮 -->
		    <u-button @click="uploadImages">上传图片</u-button>
		
	</view>
</template>
<script>
export default {
  data() {
    return {
      // 上传图片列表
      fileList1: [],
      postId: 3
    };
  },
  methods: {
    // 删除图片
    deletePic(e) {
      console.log(e);
      this[`fileList${e.name}`].splice(e.index, 1);
    },
    // 新增图片
    afterRead(event) {
      console.log(event);
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'success',
          message: '上传成功'
        });
      });
    },
    // 上传图片方法
    async uploadImages() {
      // 检查是否有图片被选中
      if (this.fileList1.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      
      // 遍历fileList1中的每个图片对象，上传图片
      for (let i = 0; i < this.fileList1.length; i++) {
        const result = await this.uploadFilePromise(this.fileList1[i].url);
        if (result) {
          // 更新图片状态和URL
          this.fileList1[i].status = 'success';
          this.fileList1[i].url = result;
        } else {
          // 处理上传失败情况
          this.fileList1[i].status = 'fail';
          this.fileList1[i].message = '上传失败';
        }
      }
    },
    // 上传图片到服务器
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: `http://localhost:8083/upload/files/${this.postId}`,  // 你的上传接口地址
          filePath: url,
          name: 'avatars',
          success: (uploadRes) => {
            console.log("上传成功", uploadRes);
            if (uploadRes.statusCode === 200) {
				 // 假设后端直接返回了URL字符串，而不是JSON
				    resolve(uploadRes.data);
              // let res = JSON.parse(uploadRes.data);
              // resolve(res.data.url);
            } else {
              reject('上传失败');
            }
          },
          fail: (err) => {
            console.log('图片上传失败', err);
            reject('上传失败');
          }
        });
      });
    },
  }
};
</script>